<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:include value="/WEB-INF/content/common/header.jsp" />
<title><s:text name="global.application.title" /> - <s:text	name="global.title.input" /></title>


<link href="<s:url value='/theme/css/idangerous.swiper.css' />" rel="stylesheet" />
<link href="<s:url value='/theme/css/swipepage.css' />" rel="stylesheet" />

</head>
<body>


	
	<script src="<s:url value='/theme/js/idangerous.swiper-2.0.min.js'/>" type="text/javascript" ></script>
<s:include value="/WEB-INF/content/common/title-head.jsp" />
	<div data-role="content" style="padding:0px;">
		<div class="ui-bar ui-bar-d" style="margin-top:10px; height:60px; padding:0px;" data-icon="check">
		
			<fieldset class="ui-grid-a">

				<div class="ui-block-a" style="width:35%; margin-top:-5px">
					<div class="ui-bar" style="height:90px">
						<s:url action="view" namespace="/menuItems" var="menuItems" />
						<s:a href="%{#menuItems}" style="margin-bottom:10px;" data-theme="b" data-ajax="false">
							<s:text name="menu.return" />
						</s:a>
					</div>
				</div>
				
				<div class="ui-block-b" style="width:65%;">
					<fieldset class="ui-grid-c">
	
						<div class="ui-block-a center" style="width:30%;">
							<!-- <input type="checkbox" name="chk" id="timeswitch" /> -->
							<div id="switch" style="margin-top:10px" >
							    <select name="chk" id="timeswitch" data-track-theme="c" data-role="slider" data-mini="true">
							        <option value="off"></option>
							        <option value="on"></option>
							    </select>
							</div>
						</div>
						
						<div id="timepickerdiv" class="ui-block-c" style="width:30%;">
							<input name="timeDateBox" type="date" data-role="datebox" data-theme="b"
								data-options='{"mode": "timebox","useFocus": true,"timeFormatOverride":12}'
								id="timepicker" />
						</div>
						
						<div class="ui-block-d" style="width:35%;">
							<button data-theme="b"><s:text name="btn.current.time" /></button>
						</div>
	
					</fieldset>
				</div>
			</fieldset>
		</div>
	</div>
		
	<div data-role="content">
	
		<div class="swiper-container swiper-nav">
			<div class="swiper-wrapper">
				<s:iterator value="menuItemList" status="rowIndex">
					<div id="nav<s:property value='#rowIndex.index'/>" class="swiper-slide "><%-- active-nav--%>	
						<span class="angle"></span>
						<div class="title"><s:property	value="groupName" /></div>
					</div>
				</s:iterator>
			</div>
		</div>
			
		<div class="wellswiperdata center" id="data" >				
			<div class="swiper-pages swiper-container">
				<div class="swiper-wrapper">				
					<s:iterator value="menuItemList" status="rowIndex">
						<div class="swiper-slide" id="tab<s:property value='#rowIndex.index'/>">
							<div class="inner">					
							
								<div style="display: none;">
									<input  id="origplannedTimetab<s:property value='#rowIndex.index'/>" value = '<s:date name="%{plannedTime}" format="HH:mm"/>'/>
								</div>
								<s:form namespace="/input" action="save" theme="simple">
									<div style="display: none;">
										<input class="hidden" id="plannedTimetab<s:property value='#rowIndex.index'/>" name="plannedTime"/>
									</div>
									<s:hidden name="inputGroup" value="%{groupName}" />
									<s:hidden name="executionDateHidden" id="executionDate" />
									<div class="ui-bar ui-bar-c ui-corner-all">
										
									<s:if test="%{groupName.equals('バイタル(定期)')}">	
									
										<s:iterator value="%{inputItemList.get(groupId)}" status="rowIndex">
											<s:if test="%{itemType.equals('INTEGER')}">
												<input type="hidden" name="ansTxtInt" id="vital<s:property value='#rowIndex.index'/>" class="center vitalinputs" style="margin-top:3px;" readonly="readonly" maxlength="3" type="text" >
												<s:hidden name="ansTxtIntHidden" value="%{itemGroupName}" />
											</s:if> <s:elseif test="%{itemType.equals('DOUBLE')}">          
												<input type="hidden" name="ansTxtDouble" id="vital<s:property value='#rowIndex.index'/>" class="center vitalinputs" style="margin-top:3px;" readonly="readonly" maxlength="3" type="text" >
												<s:hidden name="ansTxtDoubleHidden"	value="%{itemGroupName}" />
											</s:elseif>
										</s:iterator>
										
										<fieldset class="ui-grid-b">
											<div class="ui-block-a" style="width:15%;"></div>
											<div class="ui-block-b center" style="width:70%;">
												<div class="ui-overlay-shadow ui-corner-all pop ui-body-d" style="width: 100%;">
													<div class="ui-datebox-header ui-grid-c" style= "padding:10px;">
														<div class="ui-block-a" style="text-align: center; width: 25%;"><s:text name="input.vital.BPH"/></div>
														<div class="ui-block-b" style="text-align: center; width: 25%;"><s:text name="input.vital.BPL"/></div>
														<div class="ui-block-c" style="text-align: center; width: 25%;"><s:text name="input.vital.PR"/></div>
														<div class="ui-block-d" style="text-align: center; width: 25%;"><s:text name="input.vital.BT"/></div>
													</div>
													
													<div class="ui-datebox-flipcontent">
														<div id="vital0swap" class="ui-overlay-shadow" style="width: 20%;"></div>					
														<div id="vital1swap" class="ui-overlay-shadow" style="width: 20%;"></div>
														<div id="vital2swap" class="ui-overlay-shadow" style="width: 20%;"></div>
														<div id="vital3swap" class="ui-overlay-shadow" style="width: 20%;"></div>
													</div>
													
													<div class="ui-datebox-flipcenter ui-overlay-shadow" style="pointer-events: none; top: -43.5px; width: 95%;"></div>
												
													<div class="ui-grid-c">
														<div class="ui-block-a" align="center" style="width: 25%;">
															<a class="valuechanger" href="#" data-role="button" data-iconpos="notext" data-icon="back" data-theme="c" onclick="getDefaultValue('#vital0')">
																<s:text name="vital.reset"/>
															</a>
														</div>
														<div class="ui-block-b" align="center" style="width: 25%;">
															<a class="valuechanger" href="#" data-role="button" data-iconpos="notext" data-icon="back" data-theme="c" onclick="getDefaultValue('#vital1')">
																<s:text name="vital.reset"/>
															</a>
														</div>
														<div class="ui-block-c" align="center" style="width: 25%;">
															<a class="valuechanger" href="#" data-role="button" data-iconpos="notext" data-icon="back" data-theme="c" onclick="getDefaultValue('#vital2')">
																<s:text name="vital.reset"/>
															</a>
														</div>
														<div class="ui-block-d" align="center" style="width: 25%;">
															<a class="valuechanger" href="#" data-role="button" data-iconpos="notext" data-icon="back" data-theme="c" onclick="getDefaultValue('#vital3')">
																<s:text name="vital.reset"/>
															</a>
														</div>
													</div>
												</div>
											</div>
											<div class="ui-block-c" style="width:15%;"></div>
										</fieldset>
									</s:if>	<s:else>
									
										<table class="table-stripe">
											<s:iterator value="%{inputItemList.get(groupId)}" status="rowIndex2">
												<tr>
													<td style="vertical-align: middle" class="span2">
														<s:property	value="itemGroupName" /></td>
													<td style="vertical-align: middle" class="record-items">
														<s:if test="%{itemType.equals('SELECT')}">
															<s:radio name="ansRad" list="recordItemState.itemList"
																labelposition="inline" value="recordItemState.selectedList" />
															<s:hidden name="ansRadHidden" value="%{itemGroupName}" />
	
														</s:if> <s:elseif test="%{itemType.equals('CHECK')}">
															<s:checkboxlist name="ansChk"
																list="recordItemState.itemList"
																value="recordItemState.selectedList"/>
															<s:hidden name="ansChkHidden" value="%{itemGroupName}" />
	
														</s:elseif> <s:elseif test="%{itemType.equals('STEXT')}">
															<s:textfield name="ansTxtSText" cssClass="txt_input"
																value="%{recordItemState.selectedList}" id="stext%{#rowIndex.index}%{#rowIndex2.index}" />
															<s:hidden name="ansTxtSTextHidden"
																value="%{itemGroupName}" />
	
														</s:elseif> <s:elseif test="%{itemType.equals('LTEXT')}">
															<s:textarea name="ansTxtLText" cols="40" rows="8"
																cssClass="txt_input" value="%{recordItemState.selectedList}" id="ltext<s:property value='#rowIndex2.index'/>" />
															<s:hidden name="ansTxtLTextHidden"
																value="%{itemGroupName}" />
	
														</s:elseif><s:elseif test="%{itemType.equals('INTEGER')}">
															<s:textfield name="ansTxtInt" cssClass="txt_input INTEGER" value="%{recordItemState.selectedList}" id="int%{#rowIndex.index}%{#rowIndex2.index}" type="number" />
																<!--  <input name="ansTxtInt" class="center INTEGER" style="margin-top:3px;" type="text" value='recordItemState.selectedList'>-->
																<s:hidden name="ansTxtIntHidden" value="%{itemGroupName}" />												
														</s:elseif> <s:elseif test="%{itemType.equals('DOUBLE')}">  
															<s:textfield name="ansTxtDouble" cssClass="txt_input DOUBLE" value="%{recordItemState.getSelectedList()}" id="double%{#rowIndex.index}%{#rowIndex2.index}" type="number" />  
															<!-- <input name="ansTxtDouble" class="center DOUBLE" style="margin-top:3px;" type="text" > -->
															<s:hidden name="ansTxtDoubleHidden"	value="%{itemGroupName}" />
														</s:elseif>
													</td>
												</tr>
											</s:iterator>
										</table>
										</s:else>
									</div>
								</s:form>
							</div>
						</div>		
					</s:iterator>
					<s:url var="vital_url" namespace="/vital" action="view">
					</s:url>
					
					
				</div>
			</div>				
		</div>
	
		<a href="#btnComplete" style="float:right;" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="edit" data-theme="b">
			<s:text name="btn.complete.session" />
		</a>

		<div data-role="popup" id="btnComplete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
		    <div data-role="header" data-theme="a" class="ui-corner-top">
		        <h1><s:text name="btn.complete.session" /></h1>
		    </div>
		    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
		        <h3 class="ui-title"><s:property value="%{#session.CURRENT_PATIENT.userName}"/> <s:text name="global.Session.Complete.Title" /></h3>
		        <p><s:text name="global.Session.Complete.Quection" /></p>
		        <a href="#" id="cancelButton" data-role="button" data-inline="true" data-rel="back" data-theme="c"><s:text name="global.Session.Complete.Cancel" /></a>
		        
		        <s:url action="completeSession" namespace="/home" var="completeSession" />
				<s:a href="%{#completeSession}" data-theme="b" data-ajax="false" type="button"  data-inline="true" data-transition="flow">		
					<s:text name="global.Session.Complete.Confirm" />
				</s:a> 
		    </div>
		</div>
		
	</div>

<script type="text/javascript">

	/***********************************************************************************************************/
	/*                     			     Vital Data input view & Tap Event         				               */
	/***********************************************************************************************************/
	
 	$(function() {
		swipevital("vital0", vital0min, vital0max);
		swipevital("vital1", vital1min, vital1max);
		swipevital("vital2", vital2min, vital2max);
		swipevital("vital3", vital3min*10, vital3max*10);
		
		//Tap select for Input Fields
		$(".txt_input").bind( "tap", tapHandler );
		  function tapHandler(event){
		  	$(event.target).focus();
		};

	});
	
	/************************************ Vital Data input view & Tap Event*************************************/
	/***********************************************************************************************************/
	
	$(document).ready(function() {
	
	/***********************************************************************************************************/
	/*                      Activate Navigation bar swipe Function in the input View                           */
	/***********************************************************************************************************/
		var arr = $.makeArray();
		
		$('.inner').each(function(){
		    arr.push($(this).outerHeight());
		});
		
		function setContentSize() {
			$('.swiper-pages').css({
				height: Math.max.apply( Math, arr )
			});
		}
		setContentSize();
		$(window).resize(function(){
			setContentSize();
		});
	
		//Swiper Content
		var contentSwiper = $('.swiper-pages').swiper({
			onSlideChangeStart: function(){
				updateNavPosition();
			}
		});
		//Nav
		var navSwiper = $('.swiper-nav').swiper({
			visibilityFullFit: true,
			slidesPerView:'auto',
			//Thumbnails Clicks
			onSlideClick: function(){
				contentSwiper.swipeTo( navSwiper.clickedSlideIndex );
			}
		});
	
		//Update Nav Position
		function updateNavPosition(){
			$('.swiper-nav .active-nav').removeClass('active-nav');
			var activeNav = $('.swiper-nav .swiper-slide').eq(contentSwiper.activeIndex).addClass('active-nav');
			
		  /******if page swipe save the form ************/
			addTolocalStorage(contentSwiper.activeIndex);
			getVitalData($.localStorage('tab'));
			savePreviousForm();
		  /**********************************************/
			
			if (!activeNav.hasClass('swiper-slide-visible')) {
				if (activeNav.index()>navSwiper.activeIndex) {
					var thumbsPerNav = Math.floor(navSwiper.width/activeNav.width())-1;				
					navSwiper.swipeTo(activeNav.index()-thumbsPerNav);	
				}
				else {
					navSwiper.swipeTo(activeNav.index());
				}
			}
		}
	
	/*****************End Activate Navigation bar swipe Function in the input View******************************/
	/***********************************************************************************************************/
	
	
	/***********************************************************************************************************/
	/*                                Check for Items Value Changes                                  		   */
	/***********************************************************************************************************/
		
		
		$('.ui-radio').click(function() {
			save_form = true;
		});

		$('.ui-checkbox').click(function() {
			save_form = true;
		});

		$('.txt_input').keyup(function() {
			save_form = true;
		});
		
		$('.valuechanger').click(function(e){
			save_form = true;
			e.preventDefault();
		});
		
	/************************************EndCheck for Items Value Changes***************************************/
	/***********************************************************************************************************/
	
	/***********************************************************************************************************/
	/*                                   Input Data forms Manipulation 	                                  	   */
	/***********************************************************************************************************/
	
	 	var menuitem = '<s:property value="refid" />';
	 	var current_tab = "tab0";

		if (menuitem != null && menuitem != "") {
		
			var tab = 'tab'+menuitem;
			contentSwiper.swipeTo(menuitem);
			addTolocalStorage(menuitem);
			getVitalData(tab);
			showPlanedTime(tab);

		} else if ($.localStorage('tab') != null) {
			contentSwiper.swipeTo($.localStorage('tab').split("ab")[1]);
			showPlanedTime($.localStorage('tab'));	
			getVitalData($.localStorage('tab'));
		} else {
			contentSwiper.swipeTo(0);
			showPlanedTime("tab0");			
		}

			
		function savePreviousForm() {
		
			current_tab = $.localStorage('tab');
			var tab = $.localStorage('prevtab');
			var frm = $('#' + tab).find('form');
							
			showPlanedTime(current_tab);			
			
			if (save_form) {
			
				var execDate = $('#datepicker').val();
				$("input[id=executionDate]").val(execDate);					
				
				$.ajax({
					type : frm.attr('method'),
					url : frm.attr('action'),
					data : frm.serialize(),
					async : false,
					success : function(response) {
						save_form = false;
					},
					error : function(err) {
						alert("error" + eval(err));
					}
				});
			}
		}
		
		function addTolocalStorage(tabindex){
			$.localStorage('prevtab', $.localStorage('tab'));
			$.localStorage('tab', 'tab'+tabindex);
		}
		
		function getVitalData(tab) {
		
			var vital=$('#'+tab).find('input[name="inputGroup"]').val();
			
			if(vital=='<s:property value="@com.carepad.action.input.RecordItemsInputSaveAction@VITAL_INPUT"/>') {
				$.ajax({
					type : 'POST',
					url : '<s:property value="vital_url"/>',
					dataType : 'html',
					async : false,
					contentType: 'application/json; charset=utf-8',
					success : function(response) {
						if(response) {
							var pjson = $.parseJSON(response);
					        $('#vital0').val(pjson.vital0);
					        $('#vital1').val(pjson.vital1);
					        $('#vital2').val(pjson.vital2);
					        $('#vital3').val(pjson.vital3);
					        
					        setvitalval('#vital0', pjson.vital0, vital0min, vital0max, "up", 0);
					        setvitalval('#vital1', pjson.vital1, vital1min, vital1max, "up", 0);
					        setvitalval('#vital2', pjson.vital2, vital2min, vital2max, "up", 0);
					        setvitalval('#vital3', pjson.vital3*10, vital3min*10, vital3max*10, "up", 0);
					        
						};
					},
					error : function(err) {
						alert("error" + err);
					}
				});
			}
		}

		function validNumber(code) {
			if (!(code == 8 || code == 46
					|| (code >= 35 && code <= 40)
					|| (code >= 48 && code <= 57) || (code >= 96 && code <= 105))) {
				return false;
			} else {
				return true;
			}
		}

		$('.INTEGER').keydown(function(e) {
			var key = (e.which) ? e.which : e.keyCode;
			if (!validNumber(key)) {
				e.preventDefault();
			}
		});
		
		$('.DOUBLE').keydown(function(e) {
			var key = (e.which) ? e.which: e.keyCode;
			if (!validNumber(key) && key != 190 && key != 110) {
				e.preventDefault();
			} else {
				if (($(this).val().indexOf(".")) >= 0 && (key == 190 || key == 110)) {
					e.preventDefault();
				}
			}

		});		
		
		$('.INTEGER').keypress(function(e) {
		    if(e.which == 8 || e.which == 0){
		        return true;
		        
		    }
		    if((e.which < 46) || (e.which > 59)) {
		    e.preventDefault();
		        return false;
		    }
		    if(e.which == 46 && $(this).val().indexOf('.') != -1) {
		    e.preventDefault();
		        return false;
		    }
		});
		
		$('.DOUBLE').keypress(function(e) {
		    if(e.which == 8 || e.which == 0){
		        return true;
		    }
		    if((e.which < 46) || (e.which > 59)) {
		    e.preventDefault();
		        return false;
		    }
		    if(e.which == 46 && $(this).val().indexOf('.') != -1) {
		    e.preventDefault();
		        return true;
		    }
		});
		
		$(window).bind('beforeunload', function() {
			if (save_form) {
			
				var execDate = $('#datepicker').val();
				$("input[id=executionDate]").val(execDate);
				var frm = $('#' + current_tab).find('form');
				
				$.ajax({
					type : frm.attr('method'),
					url : frm.attr('action'),
					data : frm.serialize(),
					async : false,
					success : function(response) {
						save_form = false;
					},
					error : function(err) {
						alert("suberror" + err);
					}
				});
			}
		});
	/********************************END Inputform Data Manipulation *******************************************/	
	/***********************************************************************************************************/
	
	
	/***********************************************************************************************************/
	/*                                   Initialize Time Picker 	                                  		   */
	/***********************************************************************************************************/
	
		$('#timeswitch').slider();
		$('#timepickerdiv').addClass('ui-disabled');
		$('#timeswitch').val('off').slider("refresh");
		showPlanedTime(current_tab);
		
		$('#timeswitch').change(function() {
		
		    var myswitch = $(this);
		    var show     = myswitch[0].selectedIndex == 1 ? true:false;
		    
		    if(show) {
		    	var plannedTime = $('#timepicker').val();
		    	switchOn(current_tab, plannedTime);
		      			 
		    } else {
		        switchOff(current_tab);
		    }
		});
		
		function switchOn(current_tab, plannedTime){
			$('#timepickerdiv').attr('class','ui-block-c');
			$('#timeswitch').val('on').slider("refresh");					
			$("input[id=plannedTime"+current_tab+"]").val(plannedTime);
		}
		
		function switchOff(current_tab){
			$('#timepickerdiv').attr('class','ui-block-c ui-disabled');
			$('#timeswitch').val('off').slider("refresh");
			$("input[id=plannedTime"+current_tab+"]").val(null);
		}

		function setCurrentTime(){
			var time = new Date();								
			var min = time.getMinutes();
			var hr = time.getHours();
			if(min < 10){ min ='0' + min;}
			if(hr < 10){ hr ='0' + hr;}
			$('#timepicker').val(hr + ":" + min);
		}
		
		function showPlanedTime(current_tab){
 			var origplannedTime = $('#' + current_tab).find('#origplannedTime'+ current_tab).val();
				
				if(origplannedTime.length){						
					var splittime = origplannedTime.split(":");					
					$('#timepicker').val(splittime[0] + ":" + splittime[1]);					
					switchOn(current_tab, origplannedTime);
				}
				else{
					setCurrentTime();
					if(current_tab=="tab2"){
						switchOn(current_tab, $('#timepicker').val());
					} else {
						switchOff(current_tab);
					}
				}
		}
		
		$('#timepicker').change(function () {
			var plannedTime = $('#timepicker').val();
			$("input[id=plannedTime"+current_tab+"]").val(plannedTime);
		});
			
	/*********************************End Initialize Time Picker************************************************/
	/***********************************************************************************************************/
	
		
	/***********************************************************************************************************/
	/*                                   Complete Session Implemetation                               		   */
	/***********************************************************************************************************/

		$('#btnComplete').click(function() {

			var frm = $('#' + current_tab).find('form');
			
		    if (frm) {
				if (save_form) {
					var execDate = $('#datepicker').val();
					$("input[id=executionDate]").val(execDate);
					
					$.ajax({
						type : frm.attr('method'),
						url : frm.attr('action'),
						data : frm.serialize(),
						async : false,
						success : function(response) {
							save_form = false;
						},
						error : function(err) {
							alert("error" + eval(err));
						}
					});
				}
			}
		});
		
	/******************************End Complete Session Implemetation*******************************************/		
	/***********************************************************************************************************/

	}); 
		
	$(function(){
	  
	});

</script>

<s:include value="/WEB-INF/content/common/footer.jsp" />
